<template>
  <div class="stats-container">
    <div class="stats-header">
      <div class="header_left">
        <div class="header_left_first">
          <img src="@/assets/images/echarts/zfwcs.png" alt="">
          <div class="item_des">
            <p>总访问次数</p>
            <div class="num_unit">
              <div class="num">88888</div>
              <div class="unit">次</div>
            </div>
          </div>
        </div>
        <div class="header_left_second">
          <div class="second_header">
            <img src="@/assets/images/echarts/jrfwcs.png" alt="">
            <div class="item_des item_second_des">
              <p>今日访问次数</p>
              <div class="num_unit">
                <div class="num">88888</div>
                <div class="unit">次</div>
              </div>
            </div>
          </div>

          <div class="item_footer">
            <p><span>昨日：</span><span>200</span><span>次，相比</span></p>
            <img src="@/assets/images/echarts/up.png" alt="">
            <p class="percent">20<span>%</span></p>
          </div>
        </div>
      </div>
      <div class="header_center syCard">
        <div class="center_top">
          <p><span>总系统数</span><span class="num">3226</span>个</p>
        </div>
        <div class="center_des">
          <div class="des_item">
            <p class="des_title">系统用户类型分布</p>
            <PieChart></PieChart>
          </div>
          <div class="des_item">
            <p class="des_title">系统类型组成分布</p>
            <PieChart1></PieChart1>
          </div>
        </div>
      </div>
      <div class="header_right syCard">
        <p class="title_text">常用系统</p>
        <WordCloud></WordCloud>
      </div>
    </div>
    <div class="stats-body syCard">
      <div class="body_top">
        <p class="title_text">系统访问时间情况</p>
        <el-form :model="form" label-width="auto" style="height: 30px;">
          <el-form-item label=" 时间维度：">
            <el-select v-model="form.regions" style="width: 130px;" placeholder="请选择" clearable @change="getRecents()">
              <el-option v-for="item in timeD" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <LineChart></LineChart>

    </div>
    <div class="stats-footer syCard">
      <div class="body_top">
        <p class="title_text">系统访问量统计情况</p>
        <el-form :model="form" label-width="auto" style="display: flex;height: 30px;">
          <el-form-item label=" 系统：">
            <el-select v-model="form.regions" style="width: 130px;margin-right: 20px;" placeholder="请选择" clearable @change="getRecents()">
              <el-option v-for="item in timeD" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label=" 时间维度：">
            <el-select v-model="form.regions" style="width: 130px;" placeholder="请选择" clearable @change="getRecents()">
              <el-option v-for="item in timeD" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <LineChart1></LineChart1>

    </div>
  </div>
</template>
<script lang="ts" setup>
import PieChart from './pieChart.vue'
import PieChart1 from './pieChart1.vue'
import WordCloud from './wordCloud.vue'
import LineChart from './lineChart.vue'
import LineChart1 from './lineChart1.vue'
import { ref } from 'vue';
const form: any = ref({})
const timeD = ref([{ code: 'now', name: '今日' }])
const getRecents = () => {
  console.log(form.value.regions)
}
</script>
<style lang="scss" scoped>
.stats-container {
  width: 100%;
  min-width: 1500px;
  height: calc(100vh - 90px);
  overflow: auto;
  padding: .9375rem;
  box-sizing: border-box;
  // border: 1px solid black;

  .stats-header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .header_left {
      width: 16%;
      // min-width: 220px;
      height: 255px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .header_left_first,
      .header_left_second {
        background: #FFFFFF;
        box-shadow: 0px 0px 5px 0px rgba(30, 72, 114, 0.28);
        border-radius: 10px;
        padding: 1.25rem .9375rem;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
      }

      .header_left_first,
      .second_header {
        display: flex;
        justify-content: flex-start;

        img {
          width: 50px;
          height: 50px;
          margin-right: 8%;
        }

        .item_des {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          p {
            color: #333;
            font-size: 18px;
          }

          .num_unit {
            display: flex;

            .num {
              color: #529AFB;
              font-size: 28px;
              font-weight: bold;
            }

            .unit {
              color: #333;
              font-size: 18px;
              margin-top: 7px;
              margin-left: 2px;
            }
          }

        }

        .item_second_des {
          .num_unit {
            .num {
              color: #FF8C21;
            }
          }
        }
      }

      .header_left_second {
        display: flex;
        flex-direction: column;
        height: 135px;

        .item_footer {
          line-height: 28px;
          font-size: 14px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 5px;

          img {
            // margin: 0 3px;
            width: 12px;
            height: 15px;
          }

          .percent {
            color: #ff5847;
          }
        }
      }
    }

    .header_center {
      width: 55.8%;
      // min-width: 760px;
      padding: 0;
      display: flex;
      flex-direction: column;

      .center_top {
        padding: 13px 15px;
        border-bottom: 1px solid #DCDCDC;

        p {
          font-size: 18px;
          display: flex;
          align-items: center;
        }

        .num {
          color: #529AFB;
          font-size: 28px;
          font-weight: bold;
          margin: 0 3px;
        }
      }

      .center_des {
        padding: 13px 0px;
        display: flex;
        flex: 1;

        .des_item {
          width: 50%;
          display: flex;
          flex-direction: column;
          padding-left: 5%;
          justify-content: space-between;

          .des_title {
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
    }

    .header_right {
      width: 26.8%;
      // min-width: 200px;
      display: flex;
      flex-direction: column;

    }
  }

  .stats-body,.stats-footer {
    margin-top: 15px;
    height: 274px;
    display: flex;
    flex-direction: column;
    .body_top {
      height: 20px;
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.syCard {
  background: #FFFFFF;
  box-shadow: 0px 0px 5px 0px rgba(30, 72, 114, 0.28);
  border-radius: 10px;
  padding: 20px 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
}

p {
  color: #333;
}

.title_text {
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 1rem;
  color: #000000;
  display: flex;
}

.title_text::before {
  content: '';
  display: inline-block;
  width: .25rem;
  height: 1rem;
  background: #459FFF;
  border-radius: .0625rem;
  margin-right: .375rem;
}
</style>